<template>
	<div v-loading.fullscreen.lock="fullscreenLoading">
		<el-breadcrumb separator=">" style="margin: 20px 0px;">
			<el-breadcrumb-item>所有保养方案</el-breadcrumb-item>
			<span class="curr" style="color: #1973BF;">新建保养方案</span>
		</el-breadcrumb>
		<template >
			<el-tabs v-model="activeName2" type="card" @tab-click="handleClick" >
				<el-tab-pane label="1.导入数据" name="first">
					<el-row style="margin: 20px 0px;">
						<span>保养方案名称</span>
						<el-input placeholder="未填写" v-model="keyword" style="width:200px; margin-right: 10px;"></el-input>
						<span v-if="!keyword" style="color: #ff0000;">未填写</span>
					</el-row>
					<el-row style="margin: 40px 0px;">
						<el-button type="primary" size="small" plain >
							导入数据
							<input type="file" class="upl" @change="uploadExcel($event)" multiple="multiple" />
						</el-button>

						<span>下载exeecl导入方案</span>
					</el-row>
					<el-row style="margin: 40px 0px;">{{count}}</el-row>
					
					<el-row style="margin: 40px 0px;">
						<el-button type="success" size="small" plain  v-if = "count" @click="selectModule">
							下一步
						</el-button>
						<el-button type="info" size="small" plain  v-else >
							下一步
						</el-button>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="2.关联车型" name="second" :disabled="!count">
					<car-maintain ref="carMainModel" :goods-id="1" :cat-id="2" :plan-id="planId" @goPaln="goPaln"></car-maintain>
				</el-tab-pane>
			</el-tabs>
			<div><el-button @click="goPaln" type="success">返回保养手册数据</el-button></div>
		</template>
	</div>
</template>

<script>
	import * as Api from "@/api/Api.js";
	import * as RoundApi from "@/api/RoundApi.js";
	import * as Config from "@/api/Config.js";
	import carMaintain from "./CarMaintain";
	export default {
		props:{
			planParentId:{
				default:'',
				type:[String,Number]
			}
		},
		data() {
			return {
				keyword: '',
				activeName2: 'first',
				fullscreenLoading:false,
				count:'',
				planId:''
			};
		},
		methods: {
			
			goPaln() {
				this.$emit('gopLanList')
				this.count = ''
			},
			handleClick(tab, event) {
				console.log(tab, event);
				console.log(this.activeName2)
				if(this.planParentId == this.count){
					this.count  = ''
				}
				if(!this.count && !this.planParentId){
					this.activeName2 = 'first'
					this.$message.error('请选导入数据');
				}
			},
			selectModule() {
				//this.activeName2 = 'second'
				if(!this.keyword){
					this.$message.error('请填写保养方案名称');
					return
				}
				this.fullscreenLoading = true
				let model = {
					name:this.keyword,
					planId: this.planId
				};
				Api.planAdd(this, model).then(res => {
					this.fullscreenLoading = false
					if(res.retCode) {
						
						this.activeName2 = 'second'
					} else {
						
					}
				});
			},
			// Excel导入
			uploadExcel(e){
				let _this = this
			    let fs = e.target.files[0]
			    if(fs.name.indexOf('xlsx') != -1 ||fs.name.indexOf('xls') != -1){
			    	console.log(333)
			    	_this.fullscreenLoading = true;
			    	var formData = new FormData()
				    formData.append('file',fs)
				    formData.append('token',this.$store.getters.getToken)          
//					formData.append('files',event.target.files[0])
					formData.append('merchantUserId', this.$store.getters.getModel.merchantUserId)
					Api.planImport(formData).then(res => {
						console.log(res)

						_this.$message({
				          message: '导入成功',
				          type: 'success'
				        });
						_this.fullscreenLoading = false;
						_this.count = `应导入${res.data.data.all}条数据，实际导入${res.data.data.success}条数据`;
						_this.planId = res.data.data.planId
						
					}).catch(err =>{
						console.lor(err)
						this.$message("导入失败");
						_this.fullscreenLoading = false
					});
			    }else{
			    	this.$message('请选择正确的文件格式')
			    }
			     e.target.value=""
			},
		},
		components: {
			carMaintain
		},
		created(){
			this.planId = this.planParentId
			if(this.planId){
				this.count = this.planId
				this.activeName2 = 'second'

			}
		},
	};
</script>

<style scoped lang="scss">
	.curr {
		color: #1973BF;
	}
	
	.upl {
		top: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		height: 100%;
		opacity: 0;
		position: absolute;
		display: inline-block;
	}
</style>